import React from 'react';
import { Tooltip, Avatar } from 'antd';
import classNames from 'classnames';

import styles from './index.less';

const AvatarList = ({ children, size, ...other }) => {
    const childrenWithProps = React.Children.map(children, child =>
        React.cloneElement(child, {
            size,
        })
    );

    return (
        <div {...other} className={styles.avatarList}>
            <ul> {childrenWithProps} </ul>
        </div>
    );
};

const Item = ({ src, size, tips, onClick = () => {} }) => {
    const cls = classNames(styles.avatarItem, {
        [styles.avatarItemLarge]: size === 'large',
        [styles.avatarItemSmall]: size === 'small',
        [styles.avatarItemMini]: size === 'mini',
    });

    return (
        <li className={cls} onClick={onClick}>
            {tips ? (
                <Tooltip title={tips}>
                    <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
                </Tooltip>
            ) : (
                <Avatar src={src} size={size} />
            )}
        </li>
    );
};

AvatarList.Item = Item;

export default AvatarList;
